﻿<!DOCTYPE html>
<html lang="en">
<head>
	<title>cross-universe</title>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!-- 如果当前环境是IE则设置为IE最高版本 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<!-- 设置视口大小与屏幕相同 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<!-- 禁止缓存 -->
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-store, must-revalidate"/>
	<meta http-equiv="expires" content="0"/>
	<!-- 禁止识别电话号，邮件，地点(跳转至地图) -->
	<meta name="format-detection" content="telephone=no, email=no, adress=no" searchtype="map">
	<!-- 删除默认的苹果工具栏和菜单栏 -->
	<meta name="apple-mobile-web-app-capable" content="no">
	<!-- 控制状态栏显示样式 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html {
			font-size: 20px;
		}

		body {
			padding: 0;
			margin: 0;
			font: 12px/18px microsoft yahei, arial;
			background-size: 100% 100%;
			overflow: hidden;
		}
		canvas {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
    <canvas id="canvasbg" height="768" width="1366"></canvas>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script src="https://tweenjs.github.io/tween.js/src/Tween.js"></script>
<script src="./shinesky.js"></script>
<script src="./arrfiles.js"></script>
<script src="./drawimage.js"></script>
<script>
	var requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
	// 指定范围内生成随机小数
	var randomFloat = function (min, max) {
		return Math.random() * (max - min) + min;
	};
	// 指定范围内，超过指定半径的随机小数
	var randomPos = function (min, max, border) {
		for (var num = randomFloat(min, max); num > border || num < -border; num = randomFloat(min, max)) {
			return num;
		}
    };
	// 变量
	var rendererWidth = document.documentElement.clientWidth,
		rendererHeight = document.documentElement.clientHeight,
		cameraMaxZ = 500,//镜头最大高度
		cameraStartZ = 100,//镜头最小高度
		imgwidth=10,//用户照片宽度
		starCount=500,//背景星星数量
		dotSpace=10,//用户照片间距
		photoMeshes=[],//用户照片位置列表
		logoMesh,//logo照片位置
		materialArr = [],//用户照片不重复素材列表
		logoPositionData,//汇聚成logo的最终坐标数据
		inUsers=[],//进场的用户
		hideUsers=[],//视野外的用户
		addUserInterval;

	// 场景
	var scene = new THREE.Scene();

	// 几何体，宽度高度
	var geometry = new THREE.PlaneBufferGeometry(imgwidth, imgwidth);
	
	// 初始化所有素材
	for (var i = 1; i <= 100; i++) {
		var textureLoader = new THREE.TextureLoader().load(personArray[i].image);
		var material = new THREE.MeshBasicMaterial({map: textureLoader});
		material.transparent = true;
		material.opacity = 1;
		materialArr.push(material);
	}
	
	// 相机
	var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, cameraMaxZ);
    camera.position.z = cameraStartZ;

	// 渲染器
	var renderer = new THREE.WebGLRenderer({
		antialias: false,       //是否开启反锯齿
		precision: "highp",    //着色精度选择
		alpha: true,           //是否可以设置背景色透明
		premultipliedAlpha: false,
		stencil: false,
		preserveDrawingBuffer: true, //是否保存绘图缓冲
		maxLights: 1           //maxLights:最大灯光数
	});
	renderer.setSize(rendererWidth, rendererHeight);
	renderer.setClearColor(0x000000, 0);
    document.body.appendChild(renderer.domElement);

    requestAnimationFrame(animate);
    function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);
    }
	function getRandomInDot(){
		var z=randomFloat(0.5*cameraStartZ,0.9*cameraStartZ);
		var x=randomFloat(-0.1*(1-(0.997/cameraStartZ*z))*window.innerWidth,0.1*(1-(0.997/cameraStartZ*z))*window.innerWidth);
		var y=randomFloat(-0.1*(1-(0.997/cameraStartZ*z))*window.innerHeight,0.1*(1-(0.997/cameraStartZ*z))*window.innerHeight);
		return {x:x,y:y,z:z};
	}
	function getRandomOutDot(){
		var z=randomFloat(0,0.7*cameraStartZ);
		var x=randomPos(-0.5*window.innerWidth,0.5*window.innerWidth,0.5*(1-(0.997/cameraStartZ*z))*window.innerWidth);
		var y=randomPos(-0.5*window.innerHeight,0.5*window.innerHeight,0.5*(1-(0.997/cameraStartZ*z))*window.innerHeight);
		return {x:x,y:y,z:z}
	}
	function pushUserImg(src,width,height,showImg){
		//初始化几何物体
		var endDot={x:logoPositionData.dots[photoMeshes.length].x-(logoPositionData.w/2),y:(logoPositionData.h-logoPositionData.dots[photoMeshes.length].y)-(logoPositionData.h/2),z:cameraStartZ};
		var startDot=getRandomInDot();
		var w=width>height?imgwidth:(1.0*imgwidth*width/height);
		var h=height>width?imgwidth:(1.0*imgwidth*height/width);
		var textureLoader= new THREE.TextureLoader().load(src);
		var material = new THREE.MeshBasicMaterial({map: textureLoader});
		material.transparent = true;
		material.opacity = 0;
		var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(w, h), material);
		mesh.position.x = startDot.x;
		mesh.position.y = startDot.y;
		mesh.position.z = startDot.z;
		scene.add(mesh);
		photoMeshes.push({mesh:mesh,start:startDot,end:endDot,src:src});
		if(showImg){
			var showImage = new TWEEN.Tween({ o: 0 })//用户照片渐渐出现
				.to({ o: 1 }, 800)
				.onUpdate(function () {
					photoMeshes[photoMeshes.length-1].mesh.material.opacity = this.o;
					renderer.render(scene, camera);
				});
			showImage.start();
		}
	}
	function startDraw(data){
		logoPositionData=data;
		var logoTextureLoader = new THREE.TextureLoader().load(imgurl);
		var logoMaterial = new THREE.MeshBasicMaterial({map: logoTextureLoader});
		logoMaterial.transparent = true;
		logoMaterial.opacity = 0;
		logoMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(data.w, data.h), logoMaterial);
		logoMesh.position.x = imgwidth/2;
		logoMesh.position.y = 0;
		logoMesh.position.z = cameraStartZ;
		scene.add(logoMesh);
		var width=imgwidth,height=imgwidth;
		for(var i=0;i<logoPositionData.dots.length;i++){
			var endDot={x:logoPositionData.dots[i].x-(logoPositionData.w/2),y:(logoPositionData.h-logoPositionData.dots[i].y)-(logoPositionData.h/2),z:cameraStartZ};
			var startDot={x:0,y:0,z:1};
			var mesh = new THREE.Mesh(geometry, materialArr[Math.floor(randomFloat(0, materialArr.length - 1))]);
			mesh.position.x = startDot.x;
			mesh.position.y = startDot.y;
			mesh.position.z = startDot.z;
			scene.add(mesh);
			hideUsers.push({mesh:mesh,start:startDot,end:endDot,rd:getRandomOutDot()});
		}
		
		console.log(hideUsers.length);
		
		addUserInterval=setInterval(function(){
			var src=personArray[Math.floor(randomFloat(0, personArray.length - 1))].image;
			pushUserImg(src,100,100,true);
			inUsers.push(src);
			if(inUsers.length>=100)
				clearInterval(addUserInterval);
		},2000)
	}
	//material
	Pb.ShineSky.init('canvasbg',starCount)
	var imgurl='';
	Pb.Image.drawImageFile(imgurl,dotSpace,startDraw);
	
	$("canvas").click(function () {
		clearInterval(addUserInterval);//停止加载进场人员
		TWEEN.removeAll();//清空所有动画
		//已进场人员，透明度设置为1
		for (var i = 0; i < photoMeshes.length; i++) {
			photoMeshes[i].mesh.material.opacity = 1;
		}
		//加载所有重复用户到可视区域
		for (var i = inUsers.length; i < logoPositionData.dots.length; i++) {
			photoMeshes.push(hideUsers[i]);
		}
		//将剩余照片移动到随机位置，并且透明度设为1
		var moveImagesRandom = new TWEEN.Tween({ o: 0 })
			.to({ o: 1 }, 2000)
			.onUpdate(function () {
				for (var i = inUsers.length; i < logoPositionData.dots.length; i++) {
					photoMeshes[i].mesh.position.x = 1.0*(photoMeshes[i].start.x+(this.o*(photoMeshes[i].rd.x-photoMeshes[i].start.x)));
					photoMeshes[i].mesh.position.y = 1.0*(photoMeshes[i].start.y+(this.o*(photoMeshes[i].rd.y-photoMeshes[i].start.y)));
					photoMeshes[i].mesh.position.z = 1.0*(photoMeshes[i].start.z+(this.o*(photoMeshes[i].rd.z-photoMeshes[i].start.z)));
				}
				renderer.render(scene, camera);
			}).onComplete(function () {
				for (var i = inUsers.length; i < logoPositionData.dots.length; i++) {
					photoMeshes[i].start = photoMeshes[i].rd; 
					photoMeshes[i].mesh.material.opacity = 1;
				}
			});
		//将照片移动到logo位置
		var moveImages = new TWEEN.Tween({ z: cameraStartZ })//用户照片归位
			.to({ z: cameraMaxZ }, 6000)
			//.easing(TWEEN.Easing.Quadratic.Out) 
			.onUpdate(function () {
				camera.position.z = this.z;
				for (var i = 0; i < photoMeshes.length; i++) {
					photoMeshes[i].mesh.position.x = 1.0*(photoMeshes[i].start.x+(this.z-cameraStartZ)*(photoMeshes[i].end.x-photoMeshes[i].start.x)/(cameraMaxZ-cameraStartZ));
					photoMeshes[i].mesh.position.y = 1.0*(photoMeshes[i].start.y+(this.z-cameraStartZ)*(photoMeshes[i].end.y-photoMeshes[i].start.y)/(cameraMaxZ-cameraStartZ));
					photoMeshes[i].mesh.position.z = 1.0*(photoMeshes[i].start.z+(this.z-cameraStartZ)*(photoMeshes[i].end.z-photoMeshes[i].start.z)/(cameraMaxZ-cameraStartZ));
				}
				renderer.render(scene, camera);
			});
		var showLogo = new TWEEN.Tween({ o: 0 })//展示logo
			.to({ o: 1 }, 2000)
			.onUpdate(function () {
				logoMesh.material.opacity = this.o;
				for (var i = 0; i < photoMeshes.length; i++) {
					photoMeshes[i].mesh.material.opacity = 1-this.o;
				}
				renderer.render(scene, camera);
			});
		moveImagesRandom.chain(moveImages);
		moveImages.chain(showLogo);
		moveImagesRandom.start();
    });
	
	
</script>

</body>
</html>